<template>
  <div class="app-container" style="width: 40%">
    <el-form ref="form" :model="feesRecord" :rules="rules" label-width="80px">

      <el-form-item label="车  牌  号" prop="carId" label-width="100px">
        <el-select v-model="feesRecord.carId" placeholder="请选择车牌号" label-width="150px"
                   v-bind:disabled="feesRecord.id===null">
          <el-option
            v-for="(citem,cindex) in carList"
            :key="cindex"
            :label="citem.carNo"
            :value="citem.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="规费名称" prop="feesName" label-width="100px">
        <el-input v-model="feesRecord.feesName"></el-input>
      </el-form-item>

      <el-form-item label="缴费时间" prop="feesDate" label-width="100px">
        <div class="block" label-width="80px">
          <el-date-picker
            v-model="feesRecord.feesDate"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>

      <el-form-item label="缴费金额" prop="feesAmount" label-width="100px">
        <el-input-number  v-model="feesRecord.feesAmount" :precision="2" :min="0.00" :max="10000.00"></el-input-number>
      </el-form-item>

      <el-form-item label="缴费单位" prop="feesUnit" label-width="100px">
        <el-select v-model="feesRecord.feesUnit" placeholder="请选择修理厂" label-width="80px">
          <el-option
            v-for="(uitem,uindex) in unitList"
            :key="uindex"
            :label="uitem.unitName"
            :value="uitem.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="经 办 人" prop="operator" label-width="100px">
        <el-select v-model="feesRecord.operator" placeholder="请选择经办人" label-width="80px">
          <el-option
            v-for="(usitem,usindex) in usersList"
            :key="usindex"
            :label="usitem.rname"
            :value="usitem.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="送修备注" prop="remarks" label-width="100px">
        <el-input v-model="feesRecord.remarks"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="saveOrUpdate('form')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import api_fees from "@/api/fees_records.js";

export default {
  name: "add_fees_record",
  data() {
    return {
      carList: [],
      unitList: [],
      usersList: [],
      feesRecord: {
        carId: '',
        feesName: '',
        feesDate: '',
        feesAmount: '',
        feesUnit: '',
        operator: '',
        remarks: ''
      },
      rules: {
        carId: [{required: true, message: '请选择车牌号', trigger: 'change'}],
        feesName: [{required: true, message: '请填写规费名称', trigger: 'change'}],
        feesDate: [{required: true, message: '请选择缴费时间', trigger: 'change'}],
        feesAmount: [{required: true, message: '请填写缴费金额', trigger: 'change'}],
        feesUnit: [{required: true, message: '请选择缴费单位', trigger: 'change'}],
        operator: [{required: true, message: '请选择经办人', trigger: 'change'}],
        remarks: [{required: true, message: '请填写送修备注', trigger: 'change'}],
      },
    }
  },
  created() {
    this.init();
  },
  watch: {
    $route(to, form) {
      this.init();
    },
  },
  methods: {
    init() {
      api_fees.getAddList()
        .then(Response => {
          this.carList = Response.data.carList;
          this.unitList = Response.data.unitList;
          this.usersList = Response.data.usersList;
        })
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.getById(id);
      } else {
        this.feesRecord = {};
      }
    },
    saveOrUpdate(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.feesRecord) {
            this.save();
          } else {
            this.update();
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    save() {
      api_fees.saveRecord(this.feesRecord)
        .then(Response => {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.$router.push({path: "/daily_work/fees_record"});
        });
    },
    getById(id) {
      api_fees.getById(id)
        .then(Response => {
          this.feesRecord = Response.data.feesRecord
        })
    },
    update() {
      console.log(this.feesRecord)
      api_fees.updateRecord(this.feesRecord)
        .then((response) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.$router.push({path: "/daily_work/fees_record"});
        });
    },
  }
};
</script>
<style>
</style>
